<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信小程序与h5交互</title>
    <style>
        .btn {
            font-size: 70px;
            color: red;
        }

        button {
            font-size: 30px;
            padding: 10px 30px;
            border: 1px solid #ccc;
            border-radius: 10px;
        }

        button::after {
            font-size: 30px;
            padding: 10px 30px;
            border: 1px solid red;
            background-color: yellow;
            border-radius: 10px;
        }

        #desc2 {
            font-size: 18px;
        }
    </style>
</head>

<body>

    <h1>我是webview里的h5页面</h1>
    <p><a id="desc" class="btn" onclick="jumpPay()">点击支付</a></p>
    <p><button class="" onclick="goBack()">返回</button></p>
    <p><button class="" onclick="toNavg2()">toNavg2</button></p>
    <p><button class="" onclick="sendToWx()">发消息</button></p>

    <p id="desc2">desc2</p>

    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

    <!-- vconsole -->
    <script src="https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js"></script>

    <!--引入https://appx/web-view.min.js， 如该 H5 页面需要同时在非支付宝客户端内使用，为避免该请求404，可参考以下写法 -->
    <script>
        if (navigator.userAgent.indexOf('AlipayClient') > -1) {
            document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
        }
    </script>


    <script>
        // 初始化
        var vConsole = new VConsole();
        // console.log('Hello world');
        console.log('url ' + location.href);

        let payOk = getQueryVariable("payOk");
        console.log("payOk", payOk)

        if (payOk) {//支付成功
            document.getElementById('desc').innerText = "支持成功"
            document.getElementById('desc').style.color = "green"
        } else {
            document.getElementById('desc').innerText = "点击支付"
        }

        window.addEventListener('message', function (event) {
            // message-源于wx start  {"isTrusted": true}  一进入页面是触发
            console.log("message-源于wx start ", event);
            // 处理从小程序发送过来的消息
            document.getElementById('desc2').innerText = "数据-源于wx " + event
            console.log("message-源于wx end ", event.data);
        });

        //监听小程序发给H5页面的消息
        function onmessage() {
            console.log("onmessage setting-源于wx start ");
            wx.onMessage = function (e) {
                console.log(e);
                console.log("onmessage 源于wx start ", e);
            }
        }


        //获取url里携带的参数
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            console.log("data-源于wxUrl ", query);
            return (false);
        }

        function jumpPay() {
            let orderId = Date.now();//这里用当前时间戳做订单号（后面使用你自己真实的订单号）
            let money = 1;//订单总金额（单位分）
            let payData = { orderId: orderId, money: money };

            let payDataStr = JSON.stringify(payData);//因为要吧参数传递给小程序，所以这里需要转为字符串
            const url = `../wePay/wePay?payDataStr=${payDataStr}`;
            wx.miniProgram.navigateTo({
                url: url
            });
            // console.log("点击了去支付", url)
            console.log("点击了去支付")
        }

        function goBack() {
            let orderId = Date.now();//这里用当前时间戳做订单号（后面使用你自己真实的订单号）
            let money = 1;//订单总金额（单位分）
            let payData = { orderId: orderId, money: money };

            let payDataStr = JSON.stringify(payData);//因为要吧参数传递给小程序，所以这里需要转为字符串
            const url = `../wePay/wePay?Data=${payDataStr}`;
            wx.miniProgram.navigateBack();
            // wx.miniProgram.navigateTo({
            //     url: url
            // });
            // console.log("点击了去支付", url)
            console.log("点击了返回")
        }

        function toNavg2() {

            console.log("点击了toNavg2 start")
            const url = '/pages/learn/locallife/navg/navg2?name=Hui&age=20';
            const data3 = { message: 'Hello from H5!' };
            wx.miniProgram.postMessage(data3);

            wx.miniProgram.navigateTo({
                url: url
            });

            console.log("点击了toNavg2");
        }

        function sendToWx() {
            console.log("点击了sendToWx start");
            const data = { message: 'Hello from H5!' };
            wx.miniProgram.postMessage(data);
            wx.miniProgram.postMessage(data);
            console.log("点击了sendToWx");
        }
    </script>

</body>

</html>